<template>
  <div class="content">
    <Header
        :tabs="tabs"
        :active-tab="activeTab"
        @switch-tab="switchTab"
        @refresh="refreshCurrentTab"
    />

    <main>
      <KeepAlive>
        <component
            :is="currentTabComponent"
            :refreshKey="tabStates[activeTab].refreshKey"
        />
      </KeepAlive>
    </main>

    <Footer/>
  </div>
</template>

<script setup lang="ts">
import { computed, reactive, ref } from 'vue';
import Footer from './components/Footer.vue';
import Header from './components/Header.vue';
import BilibiliTab from './tabs/BilibiliTab.vue';
import EpicTab from './tabs/EpicTab.vue';
import HistoryTab from './tabs/HistoryTab.vue';
import KFCTab from './tabs/KFCTab.vue';
import NewsTab from './tabs/NewsTab.vue';
import WeiboTab from './tabs/WeiboTab.vue';

// 标签页数据
const tabs = [
  { id: 'news', name: '每日新闻' },
  { id: 'history', name: '历史上的今天' },
  { id: 'weibo', name: '微博热搜' },
  { id: 'bilibili', name: 'B站热搜' },
  { id: 'epic', name: 'E宝' },
  { id: 'kfc', name: 'KFC文学' },
] as const;
type TabId = (typeof tabs)[number]['id'];
const activeTab = ref<TabId>('news');

// 为每个tab维护状态：是否已加载、刷新key
const tabStates = reactive({
  news: { refreshKey: 0 },
  history: { refreshKey: 0 },
  weibo: { refreshKey: 0 },
  bilibili: { refreshKey: 0 },
  epic: { refreshKey: 0 },
  kfc: { refreshKey: 0 },
});

// 计算当前应该显示的组件
const currentTabComponent = computed(() => {
  switch (activeTab.value) {
    case 'news':
      return NewsTab;
    case 'history':
      return HistoryTab;
    case 'weibo':
      return WeiboTab;
    case 'bilibili':
      return BilibiliTab;
    case 'epic':
      return EpicTab;
    case 'kfc':
      return KFCTab;
    default:
      return NewsTab;
  }
});

// 切换标签页
const switchTab = (tabId: TabId) => {
  activeTab.value = tabId;
};

// 刷新当前tab
const refreshCurrentTab = () => {
  const currentTab = activeTab.value;
  tabStates[currentTab].refreshKey++;
};
</script>

<style scoped>
.content {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

main {
  flex: 1;
  padding: 2rem 1rem;
  color: white;
  background: #1a1a1a linear-gradient(135deg, #2c3e50, #3498db);
}
</style>